<template>
    <div class="video-talk-detail" v-loading="loading">
        <div class="content-box">
            <div class="content-items">
                <div class="content-title">游戏</div>
                <div class="content">
                    <span v-if="detail.game && detail.game.gameid" class="game-title" @click="goGameDetail">{{detail.game.name}}</span>
                    <span v-else>{{detail.game.name || '/'}}</span>
                </div>
            </div>
            <!-- <div class="content-items">
                <div class="content-title">游戏时长</div>
                <div class="content">{{detail.gamename}}</div>
            </div> -->
            <div class="content-items">
                <div class="content-title">总评分</div>
                <div class="content">
                    <span>{{detail.score || 0}}</span>

                    <b style="margin-left: 20px;">玩法设计：</b>
                    <span>{{detail.playStar || 0}}</span>

                    <b style="margin-left: 20px;">画面质感：</b>
                    <span>{{detail.pictureStar || 0}}</span>

                    <b style="margin-left: 20px;">操作体验：</b>
                    <span>{{detail.actionStar || 0}}</span>
                </div>
            </div>
            <div class="content-items">
                <div class="content-title">点评</div>
                <div class="content">{{detail.content}}</div>
            </div>
            <div class="content-items">
                <div class="content-title">点评者</div>
                <div class="content">{{detail.username}}</div>
            </div>
            <div class="content-items">
                <div class="content-title">点评时间</div>
                <div class="content">{{detail.createTime}}</div>
            </div>
            <div class="content-items">
                <div class="content-title">点赞数</div>
                <div class="content">{{detail.thumbsNum}}</div>
            </div>
            <div class="content-items">
                <div class="content-title">打赏数</div>
                <div class="content">{{detail.rewardNum}}</div>
            </div>
            <div class="content-items">
                <div class="content-title">吐槽数</div>
                <div class="content">{{detail.treadNum}}</div>
            </div>
            <!-- <div class="content-items">
                <div class="content-title">举报</div>
                <div class="content">{{detail.thumbsNum}}</div>
            </div> -->
        </div>
        <div class="table-top">
            <span class="table-title">举报</span>
            <span class="table-num">(0条)</span>
            <!-- TODO: -->
            <!-- <span class="table-route">查看</span> -->
        </div>
        <div class="table-box">
            <el-table
                :data="detail.feedbacks"
                border
                style="width: 100%">
                <el-table-column
                    fixed
                    prop="videoid"
                    label="点评id">
                </el-table-column>
                <el-table-column
                    width="180"
                    prop="videoid"
                    label="点评内容">
                </el-table-column>
                <el-table-column
                    prop="gameid"
                    label="点赞数">
                </el-table-column>
                <el-table-column
                    prop="gameTopic"
                    label="举报数">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="点评者">
                </el-table-column>
                <el-table-column
                    width="180px"
                    prop="rewardCoinNum"
                    label="回复内容">
                </el-table-column>
                <el-table-column
                    prop="commentNum"
                    label="点评时间">
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="点评操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === 1"><el-button @click="chagneTalkStatus(scope.row, 0)" type="text" size="small">禁用</el-button></div>
                        <div v-else><el-button @click="chagneTalkStatus(scope.row, 1)" type="text" size="small">启用</el-button></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="table-top">
            <span class="table-title">回复</span>
            <span class="table-num">(0条)</span>
        </div>
        <div class="table-box">
            <el-table
                :row-class-name="tableRowClassName"
                :data="detail.comments"
                border
                style="width: 100%">
                <el-table-column
                    fixed
                    prop="commentid"
                    label="点评id">
                </el-table-column>
                <el-table-column
                    width="180"
                    prop="content"
                    label="点评内容">
                </el-table-column>
                <el-table-column
                    prop="thumbsNum"
                    label="点赞数">
                </el-table-column>
                <el-table-column
                    prop="treadNum"
                    label="举报数">
                </el-table-column>
                <el-table-column
                    prop="username"
                    label="点评者">
                </el-table-column>
                <!-- <el-table-column
                    width="180px"
                    prop="rewardCoinNum"
                    label="回复内容">
                </el-table-column> -->
                <el-table-column
                    width="108"
                    label="点评时间">
                    <template slot-scope="scope">
                        <span>{{scope.row.createTime | timeNo0}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="status"
                    fixed="right"
                    :sortable="true"
                    label="状态">
                    <template slot-scope="scope">
                        <div style="color: #F56C6C;" v-if="scope.row.status === -2">系统删除</div>
                        <div v-else-if="scope.row.status === -1">用户删除</div>
                        <div style="color: #F56C6C;" v-else-if="scope.row.status === 0">
                            <div class="point red-point"></div>
                            <span>已禁用</span>
                        </div>
                        <div style="color:#67C23A;" v-else-if="scope.row.status === 1">
                            <span class="point"></span>
                            <span>显示中</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="点评操作">
                    <template slot-scope="scope">
                        <div v-if="scope.row.status === 1"><el-button @click="chagneTalkStatus(scope.row, 0)" type="text" size="small">禁用</el-button></div>
                        <div v-else-if="scope.row.status === 0"><el-button @click="chagneTalkStatus(scope.row, 1)" type="text" size="small" style="color:#67C23A;">启用</el-button></div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            detail: {
                game: {
                    name: ''
                },
                comments: [],
                feedbacks: []
            },
            loading: true
        }
    },
    created () {
        this.getDetail()
    },

    methods: {
        // 获取点评详情
        async getDetail () {
            let params = {
                commentId: this.$route.query.id
            }
            let res = await this.$http.post('/game/gameCommentDetail', params)
            if (res.code === '0') {
                this.detail = res.data
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        // 修改点评状态
        async chagneTalkStatus (item, status) {
            let params = {
                commentId: item.commentid,
                status
            }
            let res = await this.$http.post('/game/updateGameCommentStatus', params)
            if (res.code === '0') {
                item.status = status
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        goGameDetail () {
            const { href } = this.$router.resolve({
                path: '/game/gameDetail',
                query: {
                    id: this.detail.game.gameid
                }
            })
            window.open(href, '_blank')
        },

        tableRowClassName ({ row, rowIndex }) {
            if (row.status === 0) {
                return 'disabled-row'
            }
            return ''
        }
    }
}
</script>

<style lang="scss" scoped>
    .video-talk-detail {
        padding-top: 20px;
        padding-bottom: 20px;
        .content-box {
            .content-items {
                display: flex;
                margin-bottom: 15px;
                .content-title {
                    text-align: right;
                    width: 100px;
                    padding-right: 5px;
                    font-size: 14px;
                    font-weight: 500;
                }
                .content {
                    flex: 1;
                    font-size: 13px;
                    word-break: break-all;
                }
                .game-title {
                    color: #66b1ff;
                    cursor: pointer;
                }
            }

        }
        .table-top {
            margin-top: 10px;
            // padding-left: 40px;
            .table-title {
                font-size: 15px;
                font-weight: 500;
            }
            .table-num {
                font-size: 13px;
                font-weight: 400;
                margin: 0 10px;
            }
            .table-route {
                font-size: 13px;
                color: #66b1ff;
                cursor: pointer;
            }
        }
        .table-box {
            margin-top: 10px;

            /deep/ .el-table .disabled-row {
                color: rgba(144,147,153, .6);
            }

            .point {
                display:inline-block;
                width:10px;
                height:10px;
                border-radius: 50%;
                background-color:#67C23A;
                margin-right:3px;
            }
            .red-point {
                background-color: #F56C6C;
            }
        }
    }
</style>
